<template>
  <!-- 新增登记使用 -->
  <div class="layout">
    <ContainerTitle text="登记使用详情"></ContainerTitle>
    <div class="tableDiv">
      <div class="rowDiv">
        <div class="keyDiv">资金使用事项</div>
        <div class="valueDiv">
          {{ capitalRegisterListDetail.capitalUsage }}
        </div>
        <div class="keyDiv">关联政策</div>
        <div class="valueDiv">
          {{ capitalRegisterListDetail.capitalMatters }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">申报额度</div>
        <div class="valueDiv">
          {{
            capitalRegisterListDetail.declaredAmount
              ? capitalRegisterListDetail.declaredAmount / 10000 + "万"
              : ""
          }}
        </div>
        <div class="keyDiv">使用额度</div>
        <div class="valueDiv">
          {{
            capitalRegisterListDetail.usageLimit
              ? capitalRegisterListDetail.usageLimit / 10000+ "万元"
              : ""
          }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">资金流向处</div>
        <div class="valueDiv">
          {{ capitalRegisterListDetail.moneyFlow }}
        </div>
        <div class="keyDiv">使用时间</div>
        <div class="valueDiv">
          {{
            new Date(capitalRegisterListDetail.usageTime).pattern(
              "yyyy-MM-dd"
            )
          }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">项目类别</div>
        <div class="valueDiv">
          {{ capitalRegisterListDetail.projectCategory }}
        </div>
        <div class="keyDiv">经手人</div>
        <div class="valueDiv">{{ capitalRegisterListDetail.manager }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">审核人</div>
        <div class="valueDiv">{{ capitalRegisterListDetail.reviewer }}</div>
        <div class="keyDiv">审核时间</div>
        <div class="valueDiv">
          {{
            new Date(capitalRegisterListDetail.reviewerTime).pattern(
              "yyyy-MM-dd"
            )
          }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">附件</div>
        <div class="valueDivFull">
          <!-- 遍历文件 -->
          <div v-for="(item, i) in FileData" :key="i">
            <span class="enclosure" @click="downLoad(item)">{{
              item.fileName
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRegistration, getFileData } from "@/common/api/company.js";
export default {
  data() {
    return {
      name: "finance",
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "",
        },
        {
          label: "资金使用登记",
          value: "capitalRegister",
        },
        {
          label: "登记使用记录列表",
          value: "capitalRegisterList",
        },
        {
          label: "登记使用详情",
          value: "",
          choose: true,
        },
      ],
      ids: "",
      capitalRegisterListDetail: {},
      FileData: [],
    };
  },
  mounted() {
    this.ids = this.$route.query.id;
    // this.getDict();
    this.getData();
  },
  methods: {
    async getData() {
      let res = await getRegistration(this.ids);
      if (res.code == 200) {
        this.capitalRegisterListDetail = res.data;
        this.total = res.total;
        this.getFileData();
      }
    },
    // 获取文件数据
    async getFileData() {
      let res = await getFileData(this.capitalRegisterListDetail.fileUrl);
      if (res.code == 200) {
        this.FileData = res.rows;
      }
    },
    // 下载
    downLoad(item) {
      window.location.href = item.filePath;
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.tableDiv {
  font-size: 15px;
  border: 1px solid #eeeeee;
  color: #666666;
  margin-bottom: 150px;
}

.tableDiv .rowDiv {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
}

.tableDiv .rowDiv:last-of-type {
  border-bottom: none;
}

.tableDiv .rowDiv .keyDiv {
  flex-shrink: 0;
  padding: 10px;
  background-color: #f4f4f4;
  width: 115px;
  color: #333;
  font-size: 14px;
  text-align: right;
}

.tableDiv .rowDiv .valueDiv {
  padding: 10px;
  width: 40%;
  font-size: 14px;
  text-align: left;
  word-break: break-all;
}

.tableDiv .rowDiv .valueDivFull {
  padding: 10px;
  /* width: 40%; */
  text-align: left;
  word-break: break-all;
}

.tableDiv .rowDiv .valueDiv img:hover {
  cursor: pointer;
}
.enclosure {
  color: #045db9;
  cursor: pointer;
}
</style>